2.3: Our First Program
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.
Let's run code outside the browser console. We'll create a basic program with a SWE Fundamentals starter template.
- 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.
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.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;
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;
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.
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';
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;
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..."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.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.`;
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.