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
.
- 0
- 1
- 50.0
- 3.1415
- -1234567
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.
- "2.0"
- '9001'
- '#yikes'
- "Wellesley College!"
- 'CS 204'
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.
!
(pronounced "not") negates a boolean value.!true
becomes false and!false
becomes true.&&
(pronounced "and") returns true if both arguments are true. Otherwise, it returns false.||
(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.).