Teaching
/
Intro to Web Dev (Spring 2022)
/
JavaScript Libraries - Week 07

JavaScript Libraries - Week 07

Welcome to week 7 of Intro to Web Dev!

Now you know how to write your own JavaScript code. This week you’ll learn about JavaScript libraries, which let you use code written by other people!

Work through the activities in this page to complete the week!

JavaScript Libraries

First, watch this video and read through the tutorial to learn about JavaScript libraries:

Libraries Libraries

Learn about using libraries in JavaScript.

p5.js

Now that you’ve learned about JavaScript libraries, I want to introduce you to my favorite library: p5.js!

One thing I love about p5.js is that it’s a great way to practice the fundamentals of JavaScript in a fun environment. So if you’ve been struggling with JavaScript, please use this week as a chance to revisit the concepts in p5.js!

p5.js Tutorials p5.js Tutorials

Learn how to create p5.js sketches!

Quiz

  1. In your own words, what is a JavaScript library? How do you use one?

  2. In your own words, what is p5.js?

  3. What’s your favorite p5.js variable or function, and what does it do?

    Note: There is no wrong answer to this question. If you don’t have a favorite, pick one you used most often, or one that surprised you.

  4. What does the p5.js quad() function do?

    Note: This function was not mentioned in any of this week’s content. I’m testing that you can research and read about new p5.js functions you haven’t seen before. Feel free to use a search engine and resources like the p5.js reference to answer this question.

  5. Let’s say you wanted to display the current date and time in your webpage, but you didn’t want to format it yourself. How would you find a JavaScript library that formats dates and times for you?

Project

Now you’ve seen the fundamentals of JavaScript libraries and p5.js.

To practice these concepts, modify the files in the week-07-p5js directory of your project repo.

If you want some inspiration, check out these p5.js examples:

p5.js Tutorials p5.js Tutorials

Learn how to create p5.js sketches!

Checklist

  1. Learn about libraries and p5.js
  2. Follow the directions in the week-07-p5js directory of your project repo
  3. Push those changes to GitHub and confirm you can see them in your GitHub Pages site
  4. Get ready to present your work. Make sure your camera and microphone work!