1.1 How a website works

When you open a browser and type in the URL of this book (http://book.jspsych.org) lots of things have to happen in order for you to see the website. A connection is established between your computer and another computer that “serves” the website. One or more files are then transferred from the server to your computer. These files include HTML documents, CSS stylesheets, JavaScript files, and media elements like audio files and images. As a developer, your role is to create all of the files that are needed to render the website as you want it.

A crticial point to remember as a new web developer is that it is the job of the web browser to transform this set of files into a website. As a developer, you are providing a (very detailed) “recipe” and the browser is assembling the final dish. This might seem a bit troubling. If three chefs were given the same recipe the results might be noticably different. Fortunately, browsers are far more precise than chefs and usually websites look the same regardless of which browser is doing the rendering. This is thanks to a commonly agreed upon set of standards that browser developers follow. However, these standards have some ambiguity and as a result there are times when a website will look exactly like you want it to in one browser but not in another.

1.1.1 “Front end” and “Back end”

Two (or more) computers are involved when a website is requested: The computer that the viewer of the website is using and one or more computers that are serving the website. Programming for the web is conceptually divided based on which of the computers is running the code. If the code is running on the viewer’s computer, it’s front-end development. If it is running on the computer serving the website, it’s back-end development.

This chapter focuses on front-end web development. This kind of web development focuses on what the viewer of the website sees and how they interact with the website. It involves HTML, CSS, and JavaScript.

Back-end development is focused on programs that run on the computer(s) serving the website. These programs typically handle tasks that require access to data stored on the server. For data-rich websites, most of the programming is back-end focused. There are many programming languages that can be used for back-end development.

For a typical online experiment, most of the programming is focused on the front end. As researchers, we need to control what the user is seeing or hearing, and how they are interacting with the experiment. These are tasks that are controlled by front-end development. One aspect of back-end programming that experiments do need to handle is data storage. JavaScript (running on the participant’s computer) can record data from an experiment, but in order to store the data on the researcher’s server back-end programming is necessary. Fortunately, these back-end scripts are interchangeable for jsPsych experiments. [Chapter X] provides a sample data saving script that should work for any jsPsych experiment.