JavaScript Fundamentals

© 2015 PayPal Inc. All rights reserved. Confidential and proprietary.
github.com/nodeworkshop/setup
Setup your machine !

JavaScript Fundamentals
Deepank Vora
March/25/2015 NTU IEEE

Introduction

© 2015 PayPal Inc. All rights reserved. Confidential and proprietary. 4
About the language
• Object-oriented dynamic language
• Frontend -> Backend
• World’s most misunderstood language

Differences from Java/C++
• No Classes. Object Prototypes
• Functions are first-class objects

Types

Types
• Number
• String
• Boolean
• Symbol
• Object
• Function
• Array
• Date
• RegExp
• null
• undefined

Number
• 64-bit floating point
• Be careful of floating point precision
Special Values
• NaN
• Infinity
• -Infinity
parseInt("123"); // 123
isNaN(parseInt("a")); // true
isFinite(1/0); // false

String
• Made up of Unicode characters
• Use string of length 1 to represent characters
Examples
"North Spine".length; // 11
"North Spine".charAt(0); // "N"
"North Spine".replace("North", "South"); // "South Spine"
"North Spine".toLowerCase(); // "north spine"

null and undefined
• null: Deliberate non-value
• var x = null;
console.log(x); // null
• undefined: uninitialized value
• var x;
console.log(x); // undefined

Boolean
• true or false
• Any value can be converted to a boolean
• false, 0, “”, NaN, null, undefined -> false
• Everything else -> true

Operators
• Arithmetic: +, -, *, /, %, ++, --
• Assignment: =, +=, -=, *=, /=, %=
• Logical: &&, ||, !
• Conditional: (condition) ? value1 : value2
• Comparison: ==, ===, !=, !==, >, <, >=, <=
• Bitwise

Control Structures
If-else
if (time < 10) {
greeting = "Good morning";
} else if (time < 20){
greeting = "Good day";
} else {
greeting = "Good evening";
}
Switch
switch(day){
case 0:
case 6:
text = "Weekend :)";
break;
default:
text = "Weekday :(";
break;
}

Control Structures
For
for(var i=0; i < 10; i++){
// executes 10 times
}
While and do-while
while(index<10){
index++;
}
var input;
do{
input = getInput();
} while (input != "0")

Lab 1.1
Write a program that uses console.log to print all the numbers from 1 to
100, with two exceptions. For numbers divisible by 3, print "Fizz" instead of
the number, and for numbers divisible by 5 (and not 3), print "Buzz" instead.
For numbers that are divisible by both 3 and 5, print "FizzBuzz".

Objects
• Simply a collection of name-value pairs
• Similar to Dictionaries in Python and HashMaps in Java
• Creating objects
var dog = { breed:"labrador", color:"brown" };
// OR
var dog = new Object();
dog.breed = "labrador";
dog.color = "brown";
• Get properties
dog.breed;
dog["breed"];
• Set properties
• dog.breed = "labrador";
dog["breed"] = "labrador";

Array
Creation
var a = new Array();
a[0] = "cat";
a[1] = "dog";
a.length; // 2
// OR
var a = ["cat", "dog"];
a[1]; //"dog"
a[10] = "mouse"
a[10]; // "mouse"
a[5]; //undefined

Function
function add(x, y) {
return x + y;
}
add(1, 2); // ?
add(); // ?
add(1, 2, 5); // ?
function add() {
var sum = 0;
for (var i = 0, j = arguments.length; i < j; i++) {
sum += arguments[i];
}
return sum;
}
add(1,2,3,4); // ?

Lab 1.2
Write a range function that takes two arguments, start and end, and returns
an array containing all the numbers from start up to (and including) end.
Next, write a sum function that takes an array of numbers and returns the
sum of these numbers. Print sum(range(1,10)) and see whether it does
indeed return 55.

Custom Objects
function Person(first, last) {
this.first = first;
this.last = last;
this.fullName = function() {
return this.first + ' ' + this.last;
};
}
var p = new Person("Barack", "Obama");

Lab 1.3
Write a constructor Vector that represents a vector in two-dimensional
space. It takes x and y parameters (numbers), which it should save to
properties of the same name.
Give Vector two methods, plus and minus, that take another vector as a
parameter and return a new vector that has the sum or difference of the two
vectors’ (the one in this and the parameter) x and y values.
Add a method length which computes the length of the vector—that is, the
distance of the point (x, y) from the origin (0, 0).

Callback functions
• A callback is a function reference
• Often defined in-line where it's required
• Typically used for "one-off" asynchronous invocations
Calls function
after 1 sec
setTimeout(function() {
console.log(new Date())
}, 1000);
Inline
callback
Anonymous

Lab 1.4
Define a function add that takes in two numbers as parameters and a third
callback parameter. This function should call the callback function, passing
the result of addition to the callback function as an argument.
Call add, passing two numbers and a callback (defined in-line). The
callback should print “The sum is: __”

JavaScript Fundamentals

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (14)

Similar to JavaScript Fundamentals

Similar to JavaScript Fundamentals (20)

Recently uploaded

Recently uploaded (20)

JavaScript Fundamentals

Editor's Notes