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

More Related Content

What's hot (19)

Viewers also liked (14)

Similar to JavaScript Fundamentals (20)

Recently uploaded (20)

JavaScript Fundamentals

Editor's Notes