Fundamentals (Paid)
  • 🚀Course Overview
  • Course Logistics
    • 🏫Course Methodology
      • 🧩Course Components
      • 💬Community Channels
      • 🎲Course Projects
    • 💻Required Hardware and Software
      • ☝️Required Software 1
      • ✌️Required Software 2
      • 👍Recommended Setup
    • 🗓️Schedule
    • 💡Tips and Tricks
      • 📒Coding Strategies
      • 🛠️Tooling Pro Tips
    • 🎓Post-Course
      • 🎓LinkedIn Certificates
      • 🚂Bootcamp Admission Criteria
  • 1: Introduction
    • 1.1: What is Coding?
    • 1.2: Web Browsers
    • 1.3: Command Line
    • Additional Resources 1
  • 2: Basic Data Manipulation
    • 2: Operators and Expressions
      • 2.1: Arithmetic Operators | Mathematical Expressions
      • 2.2: Assignment Operators | Variables
    • 2.3: Our First Program
    • Additional Resources 2
  • 3: Structuring and Debugging Code
    • 3.1: Functions
    • 3.2: Errors
    • Additional Resources 3
  • 4: Conditional Logic
    • 4.1: Intro to Logic
    • 4.2: Pseudo-Code, Boolean Or
    • 4.3: Boolean AND, NOT
    • 4.4: Input Validation
    • Additional Resources 4
  • 5: Managing State and Input Validation
    • 5.1: Program Lifecycle and State
    • 5.2: Program State for Game Modes
    • Additional Resources 5
  • 6: Arrays and Iteration
    • 6.1: Arrays
    • 6.2: Loops
    • 6.3: Loops with Arrays
    • Additional Resources 6
  • 7: Version Control
    • 7.1: Git
    • Additional Resources 7
  • 8: GitHub
    • 8.1: Intro to GitHub
    • 8.2: GitHub Fork and Clone
    • 8.3: GitHub Pull Request
    • 8.4: GitHub Repo Browsing
    • 8.5: Deployment
    • Additional Resources 8
  • 9: JavaScript Objects
    • 9.1: JavaScript Objects
    • 9.2: Card Deck Generation with Loops
  • 10: Advanced
    • 10.1 HTML
    • 10.2: CSS
    • 10.3: The Document Object Model
    • 10.4: DOM Manipulation
    • 10.5: Advanced Debugging with Sources Tab
  • 11: POST COURSE EXERCISES
    • DOM
    • Further Readings
  • In-Class Exercises
    • Day 2: Basic File and Data Manipulation
    • Day 3: Functions
    • Day 4: If Statements, Boolean Or, Boolean And
    • Day 5: Program State
    • Day 6: Scissors Paper Stone Redux
    • Day 7: Loops
    • Day 8: Arrays and Loops
    • Day 9: Beat That Redux
    • Day 10: Moar Cards / Chat Bot
    • Day 11: Blackjack Redux, DOM
  • Projects
    • Project 1: Scissors Paper Stone
      • Project 1: Scissors Paper Stone (Part 1)
      • Project 1: Scissors Paper Stone (Part 2)
    • Project 2: Beat That!
    • Project 3: Blackjack
  • Past Projects
    • Drawing With Emojis
    • Guess the Word
Powered by GitBook
On this page
  • Learning Objectives
  • Introduction
  • Setup
  • Static Program Output
  • Default Template Behaviour
  • Output Own Values
  • Operations as Output
  • Dynamic Program Output
  • Function Parameters
  • Interactive Messages
  • Sample Programs
  • Greeting Program
  • Metric Conversion Program
  • Output Formatting
  • Exercise
  1. 2: Basic Data Manipulation

2.3: Our First Program

Previous2.2: Assignment Operators | VariablesNextAdditional Resources 2

Last updated 8 months ago

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

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

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

of the SWE Fundamentals Starter template and extract it to an appropriate location in your computer - see the .

.

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

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

Download the zipped folder
suggested folder structure
3.2: Variables
JavaScript template literals
Open your 'fundamentals' folder in VSCode