Engineering Manager
Goto Financial
Intro to Programming
Statements, Expressions, and Operators
Building Blocks
Values and Types, Objects, and Functions
Control Flow
Conditionals and Loops
Overview
Intro to Programming
Intro to Programming
Can you help write me instructions on how to create a paper airplane?
a = 1;
b = "1";
a + b;
Intro to Programming
What do you think will be the result of the following code snippet?
a = 2;
b = "3";
a * b;
Intro to Programming
How about this?
a = 1;
b = "1";
a + b;
Intro to Programming
Why is the result "11"?
Why is the result 6?
a = 2;
b = "3";
a * b;
Intro to Programming
a = b * 2;
Intro to Programming
Consider the following code snippet:
Intro to Programming
Statement:
a group of words, numbers, and operators that performs a specific task
a = b * 2;
Consider the following code snippet:
Intro to Programming
In the statement above:
a
` and `b
` are variables2
` is a literal value=
` and `*
` are operators;
` at the enda = b * 2;
Consider the following code snippet:
Intro to Programming
Statements consist of one or more expressions. In the statement above:
2
` is a literal value expressionb
` is a variable expressionb * 2
` is an arithmetic expressiona = b * 2
` is an assignment expressiona = b * 2;
Consider the following code snippet:
Intro to Programming
Some operators in Javascript:
=
for assignment+
, -
, *
, /
+=
, -=
, *=
, /=
++
and decrement --
.
for object property access such as the one in console.log()
==
for loose equals, ===
for strict equals, !=
for loose not equals, and !==
for strict not equals>
, <
, >=
, <=
&&
and ||
a = 21;
b = a * 2;
console.log(b);
alert(b);
Intro to Programming
age = prompt("Input your age:");
console.log(age);
Intro to Programming
Building Blocks
Building Blocks
When we express values in a program, we chosse different kind of representations of those values based on what we need to do with them. These different representations of values are called types.
The following list describes built-in types available in Javascript:
Building Blocks
Try running the following code snippet in your browser console:
var a;
typeof a; // the book says this should return 'undefined', but Chrome returns 'object'
a = "hello world";
typeof a; // returns 'string'
a = 42;
typeof a; // returns 'number'
a = true;
typeof a; // returns 'boolean'
a = null;
typeof a; // retturns 'object'
a = undefined;
typeof a; // returns 'undefined'
a = { b: "c" };
typeof a; // returns 'object'
Building Blocks
If we have a value of a number that we want to print to screen, we need to convert the type of the value from number
to string
. This is usually called a coercien. Take a look at the following example:
var a = "42";
var b = Number(a);
console.log(a);
console.log(b);
Building Blocks
Can you guess what's the result of the following code snippet?
"42" == 42;
Building Blocks
Can you guess what's the result of the following code snippet?
"42" == 42;
The coercion in the line `var b = Number(a);
` from previous slide is called explicit coercion. Javascript can also do another kind of coercion called implicit coercion like we see in the code snippet above.
Building Blocks
In a program, a variable is used to track a value as it changes throughout the program. In a statically typed language, when a variable is declared, we also need to declare its type and the type can't be changed later. In a dynamically typed language, such as Javascript, we can use the same variable for different types. Take a look at the following example:
var price = 99.99;
console.log(price);
price = "$" + String(price);
console.log(price);
Building Blocks
In Javascript, a constant is a variable that is used for centralizing value setting. The following is an example how we use constants in Javascript:
var TAX_RATE = 0.15;
var amount = 99.99;
amount = amount * TAX_RATE;
console.log(amount);
console.log(amount.toFixed(2));
TAX_RATE = 0.2;
amount = 99.99;
amount = amount * TAX_RATE;
console.log(amount.toFixed(2));
As we can see in the snippet above, Javascript constants can actually be changed, it's only constant by convention.
Building Blocks
In ES6, we use `const
` instead of `var
` for constants and it actually behaves as a constant that can't be changed:
const TAX_RATE = 0.15;
var amount = 99.99;
amount = amount * TAX_RATE;
console.log(amount);
console.log(amount.toFixed(2));
TAX_RATE = 0.2;
amount = 99.99;
amount = amount * TAX_RATE;
console.log(amount.toFixed(2));
Try the code above in your console and see what happens.
In Javascript, unlike in OO language, object is a type that has a set of properties that each hold their own values of any type.
var employee = {
name: "Iqbal Farabi",
height: 179,
is_active: true
}
// properties can be accessed with dot notation like this:
employee.name;
employee.height;
employee.is_active;
// or with bracket notation like this:
employee["name"];
employee["height"];
employee["is_active"];
Building Blocks
In Javascript, an array is an object that hold values in numerically indexed positions. Example:
var arr = ["hello world", 42, true];
arr[0];
arr[1];
arr[2];
arr.length;
typeof arr;
Like in other dynamically typed languages, an array in Javascript can contains values of different types.
Building Blocks
Like array, function is a subtype of object in Javascript. Example:
function foo() {
return "hello world";
}
foo.bar = 42;
typeof foo; // returns 'function'
typeof foo(); // returns 'string'
typeof foo.bar; // returns 'number'
The line `foo.bar = 42;` works because function is just a subtype of object and therefore can have its own properties.
Building Blocks
Control Flow
Control Flow
We can arrange statements in several ways. These are called control flow. There are several kinds of control flow:
Control Flow
If-else:
if (a == 2) {
// do something
} else if (a == 3) {
// do something else
} else {
// fallback
}
Control Flow
Switch-case:
switch(a) {
case 2:
// do something
break;
case 3:
// do something else
break;
default:
// fallback
}
Control Flow
Ternary operator:
var a = 42;
var b = (a > 41) ? "hello" : "world";
Control Flow
While loop:
i = 1;
while (i <= 10) {
console.log("current step is: " + String(i));
i++;
}
Control Flow
Do-while loop:
i = 1;
do {
console.log("current step is: " + String(i));
i++;
} while (i <= 10)
Control Flow
For loop:
for (var i = 1; i <= 10; i++) {
console.log("current step is: " + String(i));
}
Parting Gift
Write a program that prints the numbers from 1 to 100. But for multiples of three print "Fizz" instead of the number and for the multiples of five print "Buzz". For numbers which are multiples of both three and five print "FizzBuzz".
Parting Gift
Writing programs is not a low level task. It's the very core of what you'll do!
Food for thoughts: