Introduction to Javascript
Hello!
Engineering Manager
Goto Financial
Iqbal Farabi
Overview
Intro to Programming
Statements, Expressions, and Operators
1.
2.
Building Blocks
Values and Types, Objects, and Functions
3.
Control Flow
Conditionals and Loops
Overview
Intro to Programming
Intro to Programming
Before we begin...
Intro to Programming
Can you help write me instructions on how to create a paper airplane?
Let's Start with a Quiz...
a = 1;
b = "1";
a + b;Intro to Programming
What do you think will be the result of the following code snippet?
Let's Start with a Quiz...
a = 2;
b = "3";
a * b;Intro to Programming
How about this?
Let's Start with a Quiz...
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;A computer program is just a collection of many statements which combined together define all the steps required to perform a program's purpose.
Intro to Programming
Statements
a = b * 2;Intro to Programming
Consider the following code snippet:
Statements
Intro to Programming
Statement:
a group of words, numbers, and operators that performs a specific task
a = b * 2;Consider the following code snippet:
Expressions
Intro to Programming
In the statement above:
- both `
a` and `b` are variables - `
2` is a literal value - `
=` and `*` are operators - most Javascript statements are ended with `
;` at the end
a = 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 expression - `
b` is a variable expression - `
b * 2` is an arithmetic expression - `
a = b * 2` is an assignment expression
Expressions
a = b * 2;Consider the following code snippet:
Operators
Intro to Programming
Some operators in Javascript:
-
=for assignment - math operators such as
+,-,*,/ - compound assignment such as
+=,-=,*=,/= - increment
++and decrement-- -
.for object property access such as the one inconsole.log() - equality such as
==for loose equals,===for strict equals,!=for loose not equals, and!==for strict not equals - comparison such as
>,<,>=,<= - logical such as
&&and||
Try this out...
a = 21;
b = a * 2;
console.log(b);
alert(b);Intro to Programming
Try this out...
age = prompt("Input your age:");
console.log(age);Intro to Programming
Building Blocks
Building Blocks
Values and Types
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:
- string
- number
- boolean
- null and defined
- object
- symbol (new to ES6 or ECMAScript 6, the official Javascript specification)
Values and Types
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'Values and Types - Coercion
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);Values and Types
Building Blocks
Can you guess what's the result of the following code snippet?
"42" == 42;
Values and Types
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.
Variables
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);Constants
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.
Constants
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.
Objects
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
Arrays
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
Functions
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
Control Flow
Control Flow
We can arrange statements in several ways. These are called control flow. There are several kinds of control flow:
- sequential
- conditional
- loop
- subroutine
Control Flow - Conditional
Control Flow
If-else:
if (a == 2) {
// do something
} else if (a == 3) {
// do something else
} else {
// fallback
}
Control Flow - Conditional
Control Flow
Switch-case:
switch(a) {
case 2:
// do something
break;
case 3:
// do something else
break;
default:
// fallback
}
Control Flow - Conditional
Control Flow
Ternary operator:
var a = 42;
var b = (a > 41) ? "hello" : "world";
Control Flow - Loop
Control Flow
While loop:
i = 1;
while (i <= 10) {
console.log("current step is: " + String(i));
i++;
}
Control Flow - Loop
Control Flow
Do-while loop:
i = 1;
do {
console.log("current step is: " + String(i));
i++;
} while (i <= 10)
Control Flow - Loop
Control Flow
For loop:
for (var i = 1; i <= 10; i++) {
console.log("current step is: " + String(i));
}
Let's End with Another Quiz...
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".
Why Fizz Buzz?
Parting Gift
Writing programs is not a low level task. It's the very core of what you'll do!
Food for thoughts:
- https://www.gojek.io/blog/why-we-ask-for-code
- https://blog.codinghorror.com/why-cant-programmers-program/
Introduction to Javascript
By qblfrb
