Making webpages interactive

Examples of interactive webpages

Slideshows, lightboxes, infinitely loading galleries, games, and more...

Screencap of interactive webpages

...What are some of your favorite interactive webpages?

How are interactive webpages made?

  • HTML
  • CSS
  • JavaScript
Screenshot of webpage made with HTML/CSS/JS

JS: Many environments

JS can be used inside many environments for many use cases:

  • Browser: To make webpages interactive.
  • ProcessingJS: To make drawings and animations.
  • NodeJS: To make servers that render webpages and store data.
  • JohnnyFive: To control robots and arduinos.
  • Photoshop: To write scripts to automate image manipulation.

Each environment comes with its own set of relevant functionality and globals.

JS: What's part of the language?

The language of JS is the same across all those environments, so all of these concepts will be the same:

  • Variables: how to declare variables, assign, re-assign, and local vs. global scope.
  • Data types: numbers, booleans, strings, arrays, and objects.
  • Functions: how to group code into functions, pass arguments to them, and return values from them.
  • Conditionals: how to use if/else statements and logical expressions.
  • Loops: how to use while and for loops to repeat code.

Environment: JS on Codecademy

In this environment, the only functionality is writing to a console with console.log:

Screenshot of JS on Codecademy

Environment: JS in ProcessingJS

In this environment, there are many functions dedicated to drawing and animation:

  • Shapes: like rect(), ellipse(), and line()
  • Text: like text() and textSize()
  • Events: like draw() and mousePressed()
screenshot of ProcessingJS on Khan Academy

Environment: JS in the Browser

In this environment, the functions are all for making web pages interactive, like:

  • document.getElementById("main")
  • document.body.innerHTML += "<img src='cat.gif'>";
  • window.setInterval(moveImage, 1000);
  • window.addEventListener("scroll", loadMorePics);

Questions?

Return to Table of Contents