Table of Contents

Table of Contents

Admin

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

Admin

• Lab 05 is due at the end of the lab today.

• Lab Material: Brightspace CSC 130 Course - Content - Day 5: Who’s Query? JQuery!

• 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 05 - Overview

Objectives

• Get more practice using JavaScript to interact with HTML.

• Learn how to use JQuery to perform JavaScript actions.

Lab 05 - Resources

Resources

• https://developer.mozilla.org/en-us/docs/Web/API/Document\_Object\_Model

• https://www.w3schools.com/jquery/jquery_get_started.asp

• https://www.w3schools.com/js/js\_jquery\_selectors.asp

Lab 05 - Starter Files

Starter Files

• Download the ZIP folder named lab5-starter within a folder named csc130.

• Unzip the folder named lab5-starter.

The folder named lab5-starter contains one HTML file, one CSS file, one JS file, and two PNG files.

Lab 05 - Part 01

Check Point 01

• Open the file named lab5.html in a web browser (e.g., Safari, Firefox, Microsoft Edge).

• Open the file named lab5.css in a programming focused editor.

• In the file named lab5.css add the required content (i.e., the content shown in the lab 05 instructions pdf).

• Open the file named lab5.js in a programming focused editor.

• In the file named lab5.js add the required content (i.e., the content shown in the lab 05 instructions pdf).

Lab 05 - Part 02

Check Point 02

• Open the file named lab5.html in a programming focused editor.

• In the file named lab5.css add the required content (i.e., the content shown in the lab 05 instructions pdf).

Lab 05 - Part 03

Check Point 03

• Open the file named lab5.html in a programming focused editor.

• Add the JQuery Script to the HEAD section.

Lab 05 - Final Check Point

Final Check Point

__1

Send a message (private or public) to the lab TA.

__2

Walk through your code and your web page.

Note: You will need to show your work during lab time to receive credit.

Remember: If you are wanting full marks you will need to complete the bonus material AND participate meaningfully in the lab (e.g., help others, ask questions).

Lab 05 - Bonus Check Point

Bonus Check Point

Important: Setting up the required environment for student web hosting with UVic is a multi step process and can take a significant amount of time.

Please send me an email with the URL (i.e., https://studentweb.uvic.ca/~netlink/) when you have successfully uploaded the files named lab5.html, lab5.css, lab5.js, marge.png, and homer.png.

Lab 05 - Bonus Check Point

Bonus Check Point

• Download UVic VPN (students on campus can skip this step).

• Follow the instructions outlined here: https://www.uvic.ca/systems/services/internettelephone/remoteaccess/

• Activate UVic Web Hosting for Students.

• Follow the instructions outlined here: https://www.uvic.ca/systems/support/web/webhosting-students/index.php

• Visit: https://studentweb.uvic.ca/~netlink/ where netlink is your NetLink ID.

Lab 05 - Bonus Check Point

Bonus Check Point

Alternatively, you can use web hosting with GitHub.

• Follow the instructions outlined here: https://developer.mozilla.org/en-US/docs/Learn/Getting\_started\_with\_the\_web/Publishing\_your\_website\#publishing\_via\_github

Table of Contents

Lab 05

Lab 05 is Finished!

Final Steps

• Upload files to Brightspace.

• Add link to your Student Web Server.