2.3: Our First Program

Learning Objectives

At the end of this lesson, you should be able to:

• Briefly explain what String Values are.

• Concatenate String Variables together using the + operator.

• Perform simple manipulation on user input of the Fundamentals Starter Code template.

Introduction

Let's run code outside the browser console. We'll create a basic program with a SWE Fundamentals starter template.

Setup

1. Download the zipped folder of the SWE Fundamentals Starter template and extract it to an appropriate location in your computer - see the suggested folder structure.

2. Open your 'fundamentals' folder in VSCode.

Static Program Output

Default Template Behaviour

The default starter code has one basic behaviour. When you click the button you should see hello world.

Try it yourself. Open the index.html file in your browser and click the Submit button.

Output Own Values

Next, we'll change the output in the output box from the default to our own text.

Open the script.js file in your editor. You should see the following.

console.log('hello');

var main = function (input) {
  var myOutputValue = 'hello world';
  return myOutputValue;
};

On line 3 we define the main function. The {} curly brace characters surround the contents of this function. Without a further formal definition we'll begin using this code to make text appear on the screen. We'll come back to formal definitions later.

On line 4, myOutputValue is a variable that holds the value we see in the output box after we click the Submit button. Change the value of the variable to something else. We'll start with numbers only.

var myOutputValue = 2;

To see our changes, remember to save the file and refresh the browser screen. What happens when we click the Submit button? Try assigning different values and see them output in the output box.

var myOutputValue = 12;

var myOutputValue = 9999999999;

var myOutputValue = 1.234234;

Operations as Output

We can also assign variables or even mathematical operations to myOutputValue. Our previous code from 3.2: Variables looked like this.

var pi = 3.14;
var radius = 4;
var area = pi * radius * radius;

Let's add the above code and assign the value of area to myOutputValue.

var myOutputValue = area;

When we click the Submit button our program now calculates the area of a circle! Try other calculations. Remember to assign the final value to myOutputValue to see it in the output box.

var myOutputValue = 34534 * 2334;

var myOutputValue = 12 * 12;

var myOutputValue = 100 / 10;

Dynamic Program Output

A program needs to take input and produce output. So far our programs only take input from script.js, not from the user of index.html. Fortunately, the starter code is set up to take user input by default.

What happens when we type in the input box before clicking Submit? We'll begin to add inputs to our program using the input box.

Function Parameters

We'll continue working with functions without formally defining them. Our goal is to create a program that takes user-defined inputs and gives input-specific outputs. In our starter code, the input variable is a "function parameter", and its value is what we typed in the input box.

Assign the value of input to myOutputValue like the following.

var myOutputValue = input;

Now whatever we type in the input box gets output to the output box.

String Data

input is always of a data type called "string". [Wikipedia](https://en.wikipedia.org/wiki/String_(computer_science) defines a string as a "sequence of characters", where characters are typically the characters on our keyboards. Strings can also contain spaces, punctuation, numeric digits, emojis, Chinese characters, or writing in other languages. Strings are different from numbers in that numbers represent numeric values and not text. Here is an example of a string stored in a variable.

var name = 'Susan';

Interactive Messages

Change the value of myOutputValue to a string (any set of words you want) and see it appear in the output box. Let's use strings to make our program more interactive. Change the code back again to assign the value of input to myOutputValue:

var myOutputValue = input;

Sample Programs

Greeting Program

We will now create a program with purpose. The user will type their name, and we will use the name to greet them. To do this we'll take input and combine it with other strings to generate output.

var myOutputValue = 'Hello ' + input + ', you look great today!';

Change your program output to a different message. Make it longer. You can even use input more than once, for example, "Hello, Susan! Wow, Susan is a great name. Reminds me of this movie star..."

Metric Conversion Program

Let's incorporate math operations. The user will now enter a distance in kilometres and the program will output the distance in miles. 1 km equals 0.62 miles. We can write this in JavaScript like the following.

var distanceInKm = 1;
var distanceInMiles = distanceInKm * 0.62;

Change myOutputValue to see the calculation on screen.

var myOutputValue = distanceInMiles;

Try changing distanceInKm to see new conversions. To let the user input distances, assign the value of input to distanceInKm.

Output Formatting

Our programs should be user-friendly and output more than just a number. For example, if the user inputs 5, the program might output the following.

Hi! 5 kilometers is equal to 3.1 miles.

To achieve this, combine calculated values with string values like the following, similar to the Greeting Program.

var myOutputValue =
  'Hi! ' + input + ' is equal to ' + distanceInMiles + ' miles.';

A common alternative to the above string formatting is to use JavaScript template literals. The following syntax is equivalent to the syntax above.

var myOutputValue = `Hi! ${input} is equal to ${distanceInMiles} miles.`;

Exercise

Share your work with your section: save the code you write into another file. Name it share.js (A file only for sharing in Slack.) Send the code file as a snippet in your section Slack channel.