World Wide Web and Mobile Applications

CSC 130 - Lab B01 and B02

Teaching Team

Department of Computer Science
University of Victoria

Lab 06 and Lab 07

Table of Contents

Admin

All CSC 130 TA Lab Notes: https://notes.dominiquecharlebois.com/ta/csc130.html

Admin

Lab 06 and Lab 07 are due at the end of the lab today.
Lab Material: Brightspace CSC 130 Course - Content - Day 7: Lab 6 and 7!
Checkpoints are optional, thus feel free to work at your own pace and demonstrate your work at the end.
Ask Questions! Answer Questions! Collaborate with Peers!
Resource: https://developer.mozilla.org/en-US/

Admin

Credit is awarded by demonstrating your work at the end of each lab:

Students who complete all required material will obtain 3/4.
Students who complete bonus material AND collaborate with peers will obtain 4/4.

You are expected to collaborate with peers by asking and answering questions.

Table of Contents

Lab 06 - Overview

Objectives

Get more practice using JavaScript to interact with HTML.
Read and write JavaScript code with variables, if-statements, loops, and objects.

Lab 06 - Resources

Resources

Lab 06 - Part 00

Check Point 00

Go to the JSFiddle site: https://jsfiddle.net/ycoady/1yjaLx8o/6/
Explore the HTML, CSS, and JavaScript (JS) sections.
Notice the Run button in the top-left corner.

Lab 06 - Part 01

Check Point 01

We will be reading JavaScript code, and writing HTML code.

Notice the myClasses array in the JavaScript file.
Read through the array of course objects (subject, num, title).
Manually fill in the HTML table (by editing the HTML) with the course object data (i.e., add the appropriate course number and title).
Re-run the JSFiddle.

Lab 06 - Part 02

Check Point 02

We will be adding JavaScript code and using existing JavaScript code.

In the HTML code, Part 2, there is a button named “Add course” that calls a function called addCourse().
The button adds a course to the myClasses array of course objects.
In the JS code, Part 2, there is a function called addCourse().
The variable named newCourse should be modified to be a static course object (i.e., subject: CSC, num: 464, and title: Concurrency).
The function called addToArray will add the course to the myClasses array of course objects.
The button named “Add course” should now add a course to the HTML table.

Lab 06 - Bonus Check Point

Bonus Check Point

Write a single feature that could be implemented in your project that uses a function similar to “addCourse()”.
Draw a low-fidelity wireframe that implements the single feature in your project.

Table of Contents

Lab 07 - Overview

Objectives

Get more practice using JavaScript to interact with HTML.
Read and write JavaScript code with variables, if-statements, loops, and objects.

Lab 07 - Part 01

Check Point 01

We will be adding JavaScript code and using existing JavaScript code.

In the HTML code, Part 3, there is a button named “Add course” that calls a function called addCourse2().
The button adds a course to the myClasses array of course objects.
In the JS code, Part 3, there is a function called addCourse2().
The variable named newCourse should be modified to be a dynamic course object.
You will need to get the values from the input fields to populate the variable named newCourse.

Lab 07 - Part 02

Check Point 02

We will be adding JavaScript code and using existing JavaScript code.

In the HTML code, Part 4, there are buttons named “List classes”, “List 400-level classes”, and “List Math classes” that call functions.
In the JS code, Part 4, there is a function called allClasses(). The function loops over myClasses, adds them to a string, and then display the string in the web page.
Modify the fourthYearClasses() and mathClasses() to show all the fourth year classes and all the math classes respectively.

Hint: You will need to use conditional statements in your loop to determine which classes to add to the string.

Lab 07 - Bonus Check Point

Bonus Check Point

Upload Lab 06 and Lab 07 to UVic Student Web Hosting.

Table of Contents

Lab 06 and Lab 07

Lab 06 and Lab 07 are Finished!

Final Steps

Upload files to Brightspace.
Add link to text field in Brightspace submission.