Reintroduction to JavaScript

You have seen JavaScript already in CS 115, but here's a review for CS 204. In JavaScript, values have certain types, including (but certainly not limited to) numbers, strings, and booleans. We will first review those.

Numbers

Numbers are what you'd expect. For instance, the values below are of type number.

You can perform numerical operations on numbers, and order of operations applies. Try these out in your JavaScript console.

3+3;
      
5/3;

10+5*2;

10%3;

The percent sign in the last example is a modulo, which means it taking the remainder. 10/3 is 3, with a remainder of 1. So 10 modulo 3 is 1.

Strings

Strings are a sequences of characters. A string is indicated by its quotation marks. The values below are of type string.

Note, you can use either double or single quotation marks, as long as you are consistent in starting and ending in the same quotation mark.

You can add strings together, also called concatenation. When you concatenate two strings, it puts the two strings together to create a larger string. Try these in your console:

"3" + "3"; 
"3.0" + "-123";
"CS 204 " + "rocks";
"Hello " + "World!";
      
// Results
// "33"
// "3.0-123"
// "CS 204 rocks!"
// "Hello World!"

Adding Numbers and Strings: Gotcha!

So what happens when you add number and strings together? JavaScript has something called type coercion. When you add a number and string together, the number is automatically converted to a string, and the two strings are added together. For example:

12 + "1"; 
3.0 + 4.5 + "1.0";
"CS " + 204;
      
// Results
// "121"
// "3.04.51.0"
// "CS 204"

This is something to be careful of. Make sure your types are correct when adding values together, as you might get some unintended results if you add a number and a string.

Variables

In programming languages, there are entities called variables. Think of variables as storage units that reference some value. A variable is written like so:

var cat = "meow";

The name of the variable is cat, and cat is referring to the string "meow".

Note that new variables always start with the key word var. If you want to reference an old variable, use the variable name (in this case, cat) without using var.

Booleans

Booleans are the values true and false.

For instance,

1 > 3; 
3 < 15;
3 == 3;
"cat" == "dog";
3 != 4;
      
// Results
// false
// true
// true 
// false
// true

== means equals, while != means not equals. They are called equality operators.

Logical Operators

Boolean values can be tranformed and combined via three logical operators.

  1. ! (pronounced "not") negates a boolean value. !true becomes false and !false becomes true.
  2. && (pronounced "and") returns true if both arguments are true. Otherwise, it returns false.
  3. || (pronounced "or") returns true if at least one argument is true. Otherwise, it returns false.

For instance:

!(3==3)
!(3!=3)
(1 < 3) && (1 < 5); 
(1 < 3) && (100 < 5);
(1 < 3) || (100 < 5);
(3 > 100) || (5 < 1);
      
// Results
// false
// true
// true 
// false
// true
// false

Conditionals

In JavaScript, there are conditional statements that decide what action to execute. For instance,

if (grade >= 90) {
  letterGrade = "A";
} 

else if (grade >= 80) {
  letterGrade = "B";
} 

else if (grade >= 70) {
  letterGrade = "C";
} 

else if (grade >= 60) {
  letterGrade = "D";
} 

else {
  letterGrade = "F";
}
if (!sunny) {
  alert("bring an umbrella");
} 

else if( sunny && hot ) {
  alert("wear a hat");
}

else if( cold || windy ) {
  alert("wear a coat!");
}

else {
  alert("you must have the perfect weather right now");
}
if (grade >= 90) {
  letterGrade = "A";
}

Equals vs Gets: Gotcha!

What's wrong with this code?

if (grade = 100) {
  console.log("Wow you didn't miss a single question!");
}

Be careful of the difference between == and =. Multiple equal signs indicates that its an equality operater that should be used for testing if two values are equal. A single equals sign is for varible declaration, such as var grade = 100;.

Functions

A programming function is akin to a mathematical function in that you give an inputted value, and you receive an output.

For example, in the mathematical function x + 2 = y, you can input an x value of 3. The outputted y value becomes 5. Here is the code equivalent:

function addTwo(x) {
    var y = x + 2;
    return y;
}

addTwo(3);

The name of the JavaScript function is addTwo. You can give the function some value x, as indicated by the two parentheses surrounding it. x is called a parameter, because x can become any value that you input (3, 7, 8, etc.) That x value is then added to 2, and stored in a variable called y. y is then returned from the function as the final result. The last line, addTwo(3) invokes the function, meaning that you use it with your own particular values, also known as arguments. The argument in this case is 3. The function is invoked, and the return value from the addTwo function is 5.

function name(parameter1, parameter2, parameter3) {
    return value;
}

This is the general syntax. JavaScript uses the key word function to declare a function. You can have any number of parameters separated from a comma and in between parenthesis. The curly braces indicate the body of the function, or where the computation is performed. The end result of that computation is then returned (or sometimes not, depending on what you want. This is just capturing a general, common function layout.).