# 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

{% embed url="<https://youtu.be/pMMYj-Hbkxc>" %}

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](https://github.com/rocketacademy/fundamentals-starter-code/archive/refs/heads/main.zip) of the SWE Fundamentals Starter template and extract it to an appropriate location in your computer - see the [suggested folder structure](/course-logistics/required-hardware-and-software/recommended-set-up.md).
2. [Open your 'fundamentals' folder in VSCode](/course-logistics/required-hardware-and-software/recommended-set-up.md#open-basics-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.

```javascript
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.

```javascript
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.

```javascript
var myOutputValue = 12;
```

```javascript
var myOutputValue = 9999999999;
```

```javascript
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](/2-basic-data-manipulation/2-operators-and-expressions/2.2-variables.md) looked like this.

```javascript
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`.

```javascript
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.

```javascript
var myOutputValue = 34534 * 2334;
```

```javascript
var myOutputValue = 12 * 12;
```

```javascript
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.

```javascript
var myOutputValue = input;
```

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

{% hint style="info" %}
**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.

```javascript
var name = 'Susan';
```

{% endhint %}

### 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`:

```javascript
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.

```javascript
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.

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

Change `myOutputValue` to see the calculation on screen.

```javascript
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.

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

{% hint style="info" %}
A common alternative to the above string formatting is to use [JavaScript template literals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals). The following syntax is equivalent to the syntax above.

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

{% endhint %}

## 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 the discussion channel.) Send the code file as a snippet in your section discussion channel.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://fundamentals.rocketacademy.co/2-basic-data-manipulation/2.3-our-first-program.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.