Skip to content

Assignment 03: JavaScript Warmup Exercises

  • Due Thu Apr 18 23.59

Info

Backstory: As you embark on your web development journey, you decide to set your sights on something I can all get behind: fixing Axess! And hey, those systems are probably so broken that I may as well start from scratch, right? But before you can take on course enrollments, you'll need a few building blocks first. Besides, as I come up on commencement, maybe you can build up your reputation as a reliable web developer by helping out with that.

This assignment will have you practice some fundamental JavaScript concepts and how to use them in the browser. You'll build a small app to simulate students declaring their major and graduating.

Info

After completing this assignment, you will be able to

  • Write functions and classes in JavaScript that manipulate various types and data structures,
  • Create modules that import dependencies,
  • Create a small HTML page with form elements, and
  • Use JavaScript to respond to user events and read form controls.

Getting started

Follow these points to get started:

  • Download the starter code and extract the .zip file's contents.

Deliverables

I've tried to use boxes like this one to highlight the specific tasks you will need to complete for the assignment. These boxes won't stand alone without the rest of the handout, but consider, for example, using them as a checklist to make sure you've done everything.

Tasks

The first part of the assignment consists of a few short warmup exercises, designed to give you practice with JavaScript data structures.

You will write your answers in warmups.js, which has already been included in index.html. I have provided a function testWarmups(), callable from the console, to check your answers.

Task 1: Using the debugger

The first task will give you practice using the debugger.

Task 1

To begin, please make sure you replace the TODO in the import line at the top of warmups.js with your matriculation number.

The function debugExercise calls checkAnswer, passing it a "secret code." Your task is to determine the correct code to pass. But since checkAnswer is being imported from debugme.js, located outside of your assignment folder, you won't be able to modify it (in order to, for example, add a console.log).

Use the debugger to look at the JavaScript code for checkAnswer. Then, call debugExercise from the console and stop the function while it is running so you can inspect the values of the relevant variables to determine what you must pass to it.
Once you have the secret code, replace the "secret" in the argument to checkAnswer. RerunningdebugExercise` should print a "Success!" message.

Finally, fill in the comment in debugExercise with a brief (1-2 sentence) explanation of your strategy:

- how did you enter the debugger, and where did you stop? 
- How did you read the secret code?

Some notes for this task

  • You do not need to enter your user data in data.js for this task.
  • The list of files in the Sources tab is split up by where the files are located. You'll find debugme.js under rschraml.net.
  • The secret code is a short string of random characters, different for each student. The script that generates it uses some advanced JavaScript features, so I 've tucked it away in another file. You may look at the file if you'd like, but it's not necessary (and probably won't help you get the answer).
  • This being the web and JavaScript, there are ways to "circumvent the process" and solve the task without the debugger. I ask that you avoid these unintended alternate strategies, both because I think the debugger is a valuable tool to have in your toolbox, and because I expect that solving the task using the debugger will be much easier. If, after following the process I 've outlined, you want to think about how you might solve it a different way, feel free.

Task 2: Working with data structures

For the rest of this assignment, you'll work with data for a few sample students and departments. First, open data.js to have a look at the provided data. The file exports a single JavaScript Object with three entries:

  • students is an Array of Objects, each object representing a student. A student object contains their givenName, their surname, and their userid's. You can assume that userids will be unique across all students in the array.
  • depts is an Array of Objects. Each object contains information about a department: its name (like "Computer Science") and its code (like "CS").
  • ects is an Object mapping student userid (keys) to the number of ECTS that a student has completed. You may assume that there will be one entry in the object for each student in students.

This data object has been imported into warmups.js as the variable DATA. Once you have reviewed the data, fill in the functions in warmups.js, using DATA, as follows:

Task 1b

  • UserID returns the userids of the first n students (n is a parameter to the function) in the students array. You can assume there are at least n students.
  • shortDeptCodes returns an Object whose keys are department names and whose values are their corresponding codes. Not required: Only include a department in the result if its code is exactly two characters long..
  • averageECTS returns the average number of ECTS completed by all students in the data. You can assume there will be at least one student, and you don't need to round or truncate the result.
  • install a VSCode extension named ESLint, helping you to find and solve coding issues.

Each function should be relatively short and will involve some form of iteration. Once you have written these functions, you can use testWarmups (which is exposed to the console) to check that your answers match what I expect.

Task 3: Upload solution

Upload your assignment03_warmup folder to your public_html on your meise. Finally, provide a link named Assignment 03 on your personal page which refers to assignment03_warmup/index.html. I will visit your site and check if debugExercise() and testWarmups() works. E.g. see the output for testWarmups() in case of a correct solution:

testWarmups()