June 05, 2025

Web Programming

Pre-Activities

Activities

This session, we’ll be talking more about JavaScript. To get a basic grasp of how JS works with HTML and CSS to power website elements, read the “What is JavaScript?” and “JavaScript walkthrough” sections of Mozilla’s MDN web docs Dynamic scripting with JavaScript documentation.

(Optional) Go through the JavaScript exercises in W3Schools JavaScript Tutorial, from JavaScript Introduction to JavaScript Strings.

Readings

Forum post on frustration while coding

Session Activities

For this session, we’ll be using JS Bin as our JavaScript environment. Please open a JS Bin tab now!

On Frustration: Discussion

Before we get started with programming today, let’s reflect on the forum post you read before our session and your experiences working through the JavaScript homework. As you work through today’s activities, feel free to refer back to this post when you need a reminder to breathe.

Refresher on Tags, Attributes, and Elements

Before we start adding JavaScript, it’s important to make sure we understand what an HTML element, tag, and attribute are. As you work through your projects, it will also be helpful to make sure you know your terms, so that you can look things up more precisely when you need help from the Internet.

Mini Lecture: Statements, Commands, and the HTML DOM?

In this section, we’ll go over a couple of key terms when using JS, and define what the HTML DOM is in relation to JavaScript and how that can help us think about creating and executing scripts.

Finding and Using Scripts

Often when building a webpage, you won’t have to write your own JavaScript, but can use scripts already written by other people. There are many free and open-source JavaScript libraries that you can add code from to your webpage. For example:

  • D3, a library for interactive data visualizations
  • Anime.js, a library for complex animations
  • Leaflet, a library for interactive maps
  • Popper, a library for pop-ups, tooltops, and dropdowns
  • Bootstrap, a library for front-end HTML, CSS, and JS, mostly for static sites

To add a script from a library to your page, you add a script tag

In pairs, find a module in any of the JavaScript libraries above and add it to a new webpage in one of your GitHub repositories. Next, find a module not in one of the libraries above (use your awesome Googling skills) and add it to your webpage.

Editing Scripts

Sometimes you find a useful script, but need it to do something else or parse a dataset that it doesn’t already do. This is when your reading and writing skills come in, as you’ll need to edit the script to make it fit your purposes.

Take the script you added in the last activity and edit something about its functionality, styles, or the dataset it pulls from.


Break (15 minutes)


Adding JavaScript

In pairs for the twenty-five minutes, take the time to write a script for the webpage you built yesterday that will change something in your CSS or HTML. The JS functions can do whatever you want, but it’s worth considering writing a script that may relate to your project. For example, Marijke might want to add a script that plays audio on clicking a piece of text. Nic might want to add a progress tracker of some sort. Brume might want to extract all of the titles of headings into a list. Gorka might want to make an image open up in a new tab on click. See the list below for an example of scripts you might want to considering editing or recreating:

Check-Ins

We’ve spent an hour doing a lot of programming, so let’s check-in to see how we’re feeling about what we’ve handled so far. What questions do you have? How are you feeling about the process of programming? What frustrations have come up? What do you wish you knew more about?

Code Exploration

Often you might find a feature on your favourite webpage that you want to incorporate on your own site. It’s useful to be able to “read’ JavaScript, HTML, and CSS in this instance, since it means you can use your web developer tools to see how the code on that site functions.

Below is a list of sites that include JavaScript. With your partner, go through each site and try to figure out what the JavaScript is doing on the site. What purpose does it serve? What functions does it have? How does it work? What specific scripts/modules are being used? What CSS and HTML is being changed?

References

All programmers, regardless of how long they’ve been coding, rely on resource lists to help them write and debug their code. Here are a few that you can refer to when you’re writing:

Post-Activities

Continue to work on your two scripts from today’s session. If you need help, reach out to Kiran or Matt. (Optional) Keep working through programming exercises in W3 Tutorials.