Basic Programming Concepts in JavaScript


What is a program?

(One informal definition:)
A series of instructions in some programming language. Each instruction asks the computer to do one thing. Instructions are read from top to bottom, one at a time.

Basic concepts covered in this page:

(but not covered in this order!)

  • Input
  • Output
  • Processing, calculation
  • Writing new code
  • Using existing pieces (functions)
  • Variables
  • Strings, numbers
     

Actual Order:

  • Output
  • Using existing pieces (functions)
  • Strings, numbers
  • Processing, calculation
  • Writing new code
  • Variables
  • Input

Output a string, using a function:

alert("hello world");     
Notes: alert is a built-in function that will put up a dialog box with some text. You need to give it that text as a string in parentheses. All function calls need parentheses, even if there is nothing in them.

Programming languages are very picky about syntax! What happens if we type:

alert functions names have to have parentheses, even if they're empty
alert() JavaScript doesn't require a semi-colon ...
alert(); ... although other, similar languages do, so it's a good habit to get into
alert(hello world); character strings have to be surrounded in 'single quotes' or "double quotes"

(Try these on your own!)


Output the result of a calculation:

Function callOutput
alert(5 + 7); 12
alert("hello" + "world"); helloworld
alert("hello " + "world"); hello world
alert("hello" + " " + "world"); hello world
Notes: alert can take a string or a number. The + symbol works with numbers (addition) or strings (concatenation).

What happens if we type:

    alert("5 + 7");
    alert("5" + "7");
    alert("5" + 7);
    alert(5 + "7");

(Try these in the Numbers and Strings Mini-Lab!)


Using variables in new code:

Think of variables as places to store information. A variable has a name, and it has a value (i.e., the content being stored). We set or change the value using assignment.

var myMessage = "hello world";
alert(myMessage);
myMessage = "a new message";
alert(myMessage);
alert("This is " + myMessage);

var a = 7;
var b = 9;
var c = a + b;
alert(c);

a = "Hello ";
b = "World";
alert(c);
c = a + b;
alert(c);
Notes: The var keyword says that we are introducing a new variable.
Assignment is right to left -- the variable name goes on the left-hand side of the = symbol and the value (or calculation that creates a value) goes on the right. This might be easier to remember if:
whenever you see c = a + b think of it as c ← a + b

Getting input:

var personsName = prompt("Please enter your name");
alert(personsName);
var num1 = prompt("Please enter a number");
var num2 = prompt("Please enter a number");
alert(num1 + num2);
var numericNum1 = parseFloat(num1);
var numericNum2 = parseFloat(num2);
alert("Added as numbers: " + (numericNum1 + numericNum2));
Notes: prompt is a built-in function that prompts for a value. It always takes it as a string value. If the input was a number, convert it from a string to the number using the build-in parseFloat function. variable.