CSE 121B: JavaScript Language

W01: Programming Task

Overview

The purpose of this programming task is to:

• become familiar with the Visual Studio Code development environment,
• practice using the console and built-in stepwise debugger in a browser's DevTools environment,
• work with JavaScript variables, and
• publish your local work to your cse121b GitHub Pages remote space.
  All of the programming work for this class will be stored in your local cse121b repository folder established in the assigned setup activities and then a copy will be pushed (uploaded) to your remote GitHub Pages cse121b repository for assessment.

Instructions

Setup

1. Open Visual Studio Code (VS Code) and open your existing, local cse121b repository/folder that you established during the setup activities.
2. Download the starting files and unzip them for file management.
   Downloading and unzipping are completed outside of VS Code using the operating system and/or other tools. How to Unzip Files.
3. Move the files (2) into the cse121b folder. Drag and drop using VS Code's Explorer panel or use your operating systems file/folder management tool to do this. The file will be viewable in VS Code once you move them into the folder.
   💡Normally, JavaScript files (.js) are stored in a folder named scripts or js, however, for this first assignment, we will store it in the same directory as the .html file.

HTML

1. In VS Code, open the w01-task.html file.
2. Replace the <h2> content with your full name.
3. Save those changes.
   💡Saving often is a good idea or even better, set VS Code to auto-save under the File menu.

Console

1. In VS Code, right mouse click the w01-task.html file and click Open with Live Server to have it open in a default browser tab/window.
2. Open the browser's DevTools (Inspect).
3. Click on the Console tab.
4. ✅ Verify that you can see in the console that the program wrote one line of output and then produced an error.

Stepwise Debugger

Part 1: Error - Assignment to constant variable

1. Click on the Sources panel and use the Navigator tab to find the w01-task.js file. Select it.
2. In the Debugger view panel, you will see a column of numbers indicating the line numbers for each line in the JavaScript code file. This column is called the 'gutter'. Click on the 2. You will see an indicator show up in the gutter. This indicator is showing you where a 'break point' has just been set in the code. Breakpoints are how you temporarily pause the code's execution so you can slow the program down and "step" through the program manually. This is the stepwise debugger.
3. Click the browser's refresh button to render the page again. The browser will go into debugger mode.
4. Line 2 of the code will be highlighted. It has not executed. To execute this one line of code and only this one line of code, click the Step Over Next Function Call button.

   

   It is also OK to use the Step button (shown highlighted in the image).
5. Now the variable userName was assigned the value Moroni. You can hover your mouse pointer over the userName variable in the debugger and it will show you the assigned value.
6. Click the Step Over ... button two (2) more times. This will produce an error on Line 4 when the debugger tries to process that line of code. This is the part 1 error.
7. In the Console panel, note that line 3 produced output and an error was produced.
   ✅ Verify that you see these two console output lines.

   

8. You can then click on the linked line number in the error line or even view the ❌ at the end of the line number in the debugger window.
   ❔How can you fix the Assignment to constant variable error?
   We will assume that we actually do want to reassign the userName variable.
   Solution

   Declare the userName variable with let versus const.

9. ☑️In VS Code, with the w01-task.js file open in the editor, fix the 🔍 Part 1 error and view the results in the browser's console panel.

Part 2: Error - DateTime is not defined.

1. With the page running in the browser and DevTools open, click off the breakpoint on Line 2 and set a breakpoint on Line 8.
2. Refresh the page to render the page again and it will stop on Line 8.
3. Click Step Over and view the error. DateTime is not defined. The program thinks you are referencing a variable name since DateTime is not in its library.
4. Fix the problem by researching how to display the current Date and Time in JavaScript in an easy way.
5. ☑️In VS Code, with the w01-task.js file open in the editor, fix the 🔍 Part 2 error and view the results in the browser's console.
   Solution

   One simple solution is to use the Date() object.
   const currentDateAndTime = Date();

Part 3: Error

1. With the page running in the browser and DevTools open, remove all the breakpoints in the debuggers gutter of line numbers.
2. The program does not produce any red-lined reference errors at this point.
   ✅ Verify that the console output looks like this:

   

3. Add a breakpoint on Line 13.
4. Step through the program using Step not Step Over, identifying the flow of the program step-by-step.
5. In the debugger, add a Watch value on the aNumber variable by clicking the plus symbol on the Watch panel and entering "aNumber".
6. Keep stepping through the program and observe the flow and that "aNumber" watch value.
7. ✅ Confirm that the first value assigned to it after being "undefined" is "0", a string.

   

8. Try to determine the problem.
9. It is NOT required that you fix the code for this error.

Submission

1. Complete all the marked ☑️ fixes to the JavaScript code.
2. Commit your changes to your local repository.
3. Push your changes to the cse121b GitHub Pages enabled repository.
4. Be prepared to submit the complete URL to your w01-task.html file.

https://yourgithubusername.github.io/cse121b/w01-task.html