CISC181 (S21) Lab 3
Part 1 (10 marks)
Programming requires that you type everything to an exact specification, and this is not as easy as it may seem. Professional programmers frequently work in pairs, partly so that one programmer can spot typographical errors or omissions made by the other programmer. Unfortunately, working on this lab by yourself, you do not have the luxury of the extra pair of eyes, but you do have the advantage of being able to copy and paste some code from this document.
As with Lab 2, for this lab you will need a plain text editor; ideally one that knows just a little about the web markup language, HTML (which we will look at in more detail later in the course) and JavaScript program code. My preference, again, is for Visual Studio Code. You will not lose points on this lab for using a different editor, but you should not try using Microsoft Word or any program like it that inserts formatting codes into its documents.
JavaScript is a programming language that all modern web browsers understand. As a programming language, it has its strengths and weaknesses, but one of its strengths is its ubiquity; it is everywhere! All but the very simplest websites use it extensively, so it is worth your while to understand a bit about it.
I have written a JavaScript program for this lab and built it into the webpage beancounter.html which you can extract to a folder on your computer from Lab03Files.zip (available from onQ). Have a look at it by dragging it from a file listing on your computer onto an open web browser. The program will run automatically, waiting for you to place a fake coffee shop order. It should look very much like this:
On a Mac, in a different editor, or even in the same programs but with a different configuration, the file may look a little different, but here are some things to note:
Good code editors try to make the programmer’s job easier by colouring certain kinds of elements differently from others. Thus, for example, all the numbers are a sort of pink (fuchsia, maybe?) in VS Code.
The file’s text begins with the line “”. The editors use line numbering to identify this as line 1. If the editor you are using does not show line numbers by default, see if there is an option to turn them on. (If there is no such option, there may be an indicator somewhere on your editor’s interface showing you the number of the line that is currently being edited.)
The file has two large sections of note. The first lies between the
tags (lines 6 and 164, respectively) and is where most of the JavaScript code can be found. The second sits lower down inside the
tags (lines 172 and 223), and it provides both the raw elements of the user interface (the button inputs and text box outputs) and some values for many of the JavaScript variables. Think of the form, therefore, as providing the input and output devices for the program found within the
When you load the page into a web browser – whether from a distant server or from your own computer – the browser interprets the form and some style information it retrieves from the server.
Styling for the user interface – details of colour, how the boxes and buttons are drawn and placed, etc. – are contained in a file on the sites.cs.queensu.ca server that is imported on line 5. We will learn a bit about styling HTML and about HTML itself later in the course.
SAVE YOUR WORK IN YOUR EDITOR FREQUENTLY! Ctrl-S (holding down your Control or Ctrl key and pressing S) will likely do this quickly and easily. If you really mess up, it may be best to start again with a freshly extracted copy of beancounter.html. When you are asked to do any editing, make the changes in your text editor, save your work, then refresh your browser window or drag the revised file to your browser again to see how those changes are reflected in the running program.
1.(1 mark) The program has a keypad to enter quantities, and it runs subtotals (updated using the button marked “Enter”) so that the user can, for example, enter complex orders like “2 espressos, 3 short lattes with two espresso shots, 4 tall cappuccinos, and 4 grande Americanos.” Use the program to enter this order,
click on “2” on the keypad
then click on “ESPRESSO” (in the “Drink Type” box)
then click on “Enter” (in the “Calculations” box)
then click on “3” on the keypad
then click on “Short” (in the “Cup Size” box)
then click on “2” (in the “Shots (of espresso)” box)
then click on “LATTE”
then click on “Enter”
… and so on…
then, finally, click on “Total”