Run your first program and name its values

After this lesson you will be able to run a short JavaScript program in your browser, read its output in the console and change it on purpose.

Start with one idea

JavaScript is a programming language: a way to give a computer instructions. A value is a piece of information, such as the number 25. A variable gives a value a name, such as firstMinutes. Think of a labeled box: the label helps you know which information to use in a calculation.

A program is a sequence of instructions

This course assumes you have built a basic HTML page, as in Build Your First Website. Our project will calculate study time from invented practice sessions. Begin with one question: if Rowan studies for 25 minutes and then 15 minutes, how long did they study? JavaScript can calculate the answer, but you must tell it which values to use and where to show the result. No previous JavaScript knowledge is assumed.

Use a plain-text editor such as VS Code and a current browser. Create a folder named study-calculator and save the following two files in it. Double-click index.html to open it in your browser, then open the Console:

• Chrome or Edge: press Ctrl+Shift+J on Windows and Linux, or Cmd+Option+J on a Mac.
• Firefox: press Ctrl+Shift+K, or Cmd+Option+K on a Mac.
• Safari: first turn on Settings, then Advanced, then Show features for web developers. Then press Cmd+Option+C.

The Console is the panel where your program's messages appear, along with any errors. Keep it open while you work and reload the page (F5 or Cmd+R) after each change to the script. If you only have a tablet, a free online editor such as CodePen (codepen.io) has a JavaScript panel and its own Console button. All examples use invented details and need no account.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Study calculator practice</title>
  <script src="practice.js" defer></script>
</head>
<body>
  <main><h1>Study calculator practice</h1>
    <p>Open the console to see today's calculations.</p>
  </main>
</body>
</html>

Save this as practice.js:

const firstMinutes = 25;
const secondMinutes = 15;
const totalMinutes = firstMinutes + secondMinutes;
console.log("Study minutes:", totalMinutes);
console.log("Hours:", totalMinutes / 60);

Expected console output is Study minutes: 40 and Hours: 0.6666666666666666. Your browser may format the spaces differently. Read the program from top to bottom:

1. const firstMinutes = 25 gives the name firstMinutes the value 25. Here, = means “assign this value.”
2. The next line names the second value.
3. firstMinutes + secondMinutes adds them, and totalMinutes names the answer.
4. console.log(...) displays the values inside its parentheses in the Console.

A named connection to a value is sometimes called a binding. Quotes make text, so "Study minutes:" is a label, while 25 without quotes is a number. Names ending in Minutes help you remember the unit.

Change a small part and predict the result

Change the first session to 30 and predict the total before reloading. Add a third session of 10 minutes using a new name, then include it in the total. Record the predicted and actual results. Try multiplication to calculate four identical 15-minute sessions. Avoid adding a quoted value such as "15" for now; text and numbers have different rules that the next lesson will explain.

For changing values, use let: let minutes = 10; minutes = 20;. Attempting to reassign a const produces an error. Change that one declaration to let; keep const everywhere else.

Debug a file connection

Rename practice.js without updating the HTML. Reload and inspect the Console and Network panels. The missing-file message describes the connection problem. Restore the matching filename. A program cannot produce output if the browser never loads it.

Check yourself

1. Why does console.log(totalMinutes) use no quotes around the name?
2. Why is 40 / 60 fractional?

Answers

1. It requests the stored value. console.log("totalMinutes") displays the literal text.
2. Minutes are converted to hours; rounding has not been requested.

Save your progress

Keep the two files and a short notes.txt (a plain text file in the same folder) explaining the units, how to run the example, and three calculations you checked. This is your first saved progress point: you know which values go in and can check what comes out.

Reference: MDN JavaScript first steps.