Introduction

This tutorial is for physics instructors and anyone else who wants to learn how to create interactive web pages with animated graphics.

I’ll assume that you have programmed a computer before, so you’re familiar with basic programming concepts and you know how to be careful with syntax.

I won’t assume that you already know how to create web pages, or that you’re familiar with the specific syntax of web programming.

My goal is to introduce you to the web as a programming platform, similar in most ways to the programming environments that are traditionally used by scientists. The “program” in this case is simply a web document; the interpreter that runs the program is the user’s browser; and the program’s output is the web page as seen by the user.

As a method of developing and deploying software, the web has several advantages:

Your code can run on virtually any computer with a web browser, including tablets and smart phones; there’s no need to create separate versions for each device.
Users of your program don’t need to go through a burdensome installation process .

Web technologies are well supported and are likely to be around for a long time (by the standards of the computing industry).

It’s easy to get started coding, since you can begin with very simple web pages and you don’t need to purchase or install any development tools.

Your program’s web page provides a convenient place to put instructions and other documentation, including links.

Your code is inherently open-source, visible to any user who can run it.

Naturally, web programming also has some disadvantages:

Before you can write a web program you must create a web page. This means more coding overhead and more syntax for you to learn.
Your code must (or at least should) accommodate a variety of screen sizes, user input mechanisms, and processor speeds. This variety limits your design options and makes optimization difficult.
Your code has no direct way of accessing the file system on the user’s computer (though you can store data during one session for later retrieval during another).
Your code and any associated data must be small enough for users to download quickly over their networks.
Your code won’t run as quickly as native code on any device (though it can often come close).
Your code is inherently open-source, visible to any user who can run it.

These limitations make web programming an inferior choice for those who want to build big simulations or just tinker or crunch data on their own. Web programming can be ideal, though, if you want to share your programs with the rest of the world. That’s probably the case if you’re a teacher writing programs for your students—for instance, a physics instructor sharing simulations of quantum wavefunctions or fluid dynamics.

So that’s the motivation behind this tutorial. More specifically, this tutorial will teach you the basics of:

Hyper-Text Markup Language (HTML), for defining the logical structure of a web page;
Styling (“CSS”), for specifying the appearance of each element on a web page;
JavaScript, the programming language that brings web pages to life;
The HTML5 canvas element, which provides a space on a page where your code can draw using JavaScript instructions;
HTML input controls such as buttons and sliders for user interactivity.

That’s a lot to learn! But it’s not as much as you might think, because this tutorial covers only a small subset of each of these technologies, and it completely omits several related technologies. In particular, this tutorial will not prepare you to:

use every feature of JavaScript or CSS or HTML (including most of what’s been added in HTML5);
understand most other people’s JavaScript code;
use the many JavaScript libraries that simplify certain high-level tasks;
program a server to assemble web pages from a database in response to user input, or to acquire and store information from users;
design a large corporate web site; or
get a job as a professional web developer.

Our focus instead will be on creating self-contained web pages that run entirely on the user’s computer (the “client”), performing computations and presenting visual results, taking input parameters from the user through graphical controls. With this limited goal, we can avoid many of the more difficult aspects of web programming and take certain shortcuts that wouldn’t be available to an aspiring web professional. If you think of the universe of web development as the vast Forest of Mirkwood, then our goal is not to visit every tree and creature in the forest, but merely to find the magical Elf Path that will get us safely to our destination. Leave the path at your own risk!

Of course, once you have gained some experience and grown stronger, you can always return and explore some of the more challenging aspects of web development.

About the author

If you’re hoping to learn web programming from an experienced professional, this tutorial is not for you. I’m a full-time physicist and educator, but only a part-time hobbyist-level programmer. My knowledge of web programming doesn’t go far at all beyond what’s in this tutorial, and I’ve learned this subject almost entirely from books and online references and trial-and-error, without the benefit of an expert mentor. I’m sure many experts would scoff at some of the ways I do things, but on the other hand, their priorities aren’t the same as mine. I do hope that, as an inexperienced newcomer to web programming, I can at least offer a fresh perspective that you won’t find elsewhere.

Acknowledgments

These tutorial materials were originally developed for a workshop given at the AAPT Summer Meeting in Minneapolis on 27 July 2014. I am grateful to Danny Cabellero, Andrew Duffy, and the AAPT Educational Technology Committee for agreeing to sponsor this workshop, and to the two dozen participants who made it a success. Andrew Duffy also provided valuable feedback on the materials while they were under development, and indispensable help with the workshop itself.

Next: Web Page Basics

Back to index