Object Oriented Javascript

Object Oriented JavaScript
An Introduction
Gaurav Gupta

Agenda
●
JavaScript: What & Why ?
●
Javascript Basics keywords and Syntax
●
Functions
●
Special Functions: bind, call and apply, setTimeout, setInterval function.
●
Objects: Working with Objects
●
What is “this” ?
●
Prototypal Inheritance
●
Callbacks & Callback Hell
●
Closures & Promises
●
Async Programming

What???
● JavaScript is the most popular scripting language on the
internet, and works in all major browsers, such as Internet
Explorer, Firefox, Chrome, Opera, and Safari.

What and Why is JavaScript??
● JavaScript was designed to add interactivity to HTML pages
● JavaScript is a scripting language
● JavaScript is usually embedded directly into HTML pages
● JavaScript is an interpreted language (means that scripts execute
without preliminary compilation)
● Everyone can use JavaScript without purchasing a license

Document.write()
● It is used to write text on the document.
● Example:
● <html>
● <body>
● <h1>My First Web Page</h1>
● <script type="text/javascript">
● document.write("<p>" + Date() + "</p>");
● </script>
● </body>
● </html>

JavaScript Variables
● Same as algebra, JavaScript variables are used to hold
values or expressions.
● A variable can have a short name, like x, or a more
descriptive name, like carname.
● Rules for JavaScript variable names:
● Variable names are case sensitive (y and Y are two
different variables)
● Variable names must begin with a letter or the
underscore character
● Note: Because JavaScript is case-sensitive, variable names
are case-sensitive.

Example
var x=5;
var carname="Volvo";
y=x-5;
z=y+5;
Etc..

JavaScript If...Else Statements
● Javascript supports if,if else, else statements.
● <script type="text/javascript">
● //If the time is less than 10, you will get a "Good morning" greeting.
● //Otherwise you will get a "Good day" greeting.
● var d = new Date();
● var time = d.getHours();
● if (time < 10)
● {
● document.write("Good morning!");
● }
● else
● {
● document.write("Good day!");
● }
● </script>

JavaScript Switch Statement
● JavaScript Supports Switch Statement
<script type="text/javascript">
● //You will receive a different greeting based
● //on what day it is. Note that Sunday=0,
● //Monday=1, Tuesday=2, etc.
● var d=new Date();
● var theDay=d.getDay();
● switch (theDay){
● Case 5: document.write("Finally Friday");
● break;
● Case 6: document.write("Super Saturday");
● break;
● Case 0: document.write("Sleepy Sunday");
● break;
● Default: document.write("I'm looking forward to this weekend!");
● }
● </script>

JavaScript Popup Boxes
● Three types of boxes:
– Alert Box
● alert("sometext");
– Prompt Box
● var name = prompt("Please enter your name","Harry
Potter");
– Confirm Box
● var r = confirm("Press a button"); return: [true/false]

Functions
●
Functions are first class members of JavaScript
●
They can be used just like variables
function someFunction(arg1, arg2) {
return arg1 + arg2;
}

Objects
●
In JavaScript almost everything is an Object
●
Multiple ways to create an Object
○
Object Constructor var obj = new Object()
○
Object Literal var obj = {}
○
Inbuilt Method var obj = Object.create()
○
Constructor function var obj = new Person()
Exampl
e

Constructor Function
●
Constructor function is similar to the notation of a
Class
function Person(name, age) {
this.name = name;
this.age = age;
}
Exampl
e

Prototypes
●
Objects inheriting from other Objects
●
Prototype is an object used to construct new
objects
●
we can assign properties to prototypes to inherit
them
Prototypes are used with Constructor Functions

Prototypal Chain
●
All Objects inherit from Object class
●
If certain property is not available on current
object, it is looked on prototype, then Parent’s
prototype and so on … until the property or
null is found
o → o.prototype …→ → Object.prototype → null

Inheritance
●
Inheriting properties and methods
●
Prototypes are used for inheritance
●
Two ways
○
Inherit from Constructor Functions (Class)
○
Inherit from another Objects
Exampl
e

Call & Apply
●
Call/Apply both are used to call a function with the
ability to change the this reference
●
Only difference between the two is syntax
○
Call takes arguments as a list
functionName.call(obj, arg1, arg2);
○
Apply takes an array of Arguments
functionName.apply(obj, [arg1, arg2]);
Exampl
e

Callbacks
●
Callbacks are basically functions passed on as
arguments to another operation
●
This allows us to cope with Asynchronous nature
of JavaScript
●
We don’t have to block the browser for results
Exampl
e

Async Programming
●
Callbacks really help in maintaining the sanity in
Asynchronous operations
●
But, what if there are huge no of async operations
depending on each other, nested inside each
other..
●
This is referred to as Callback hell..

Callback Hell
asyncOp1(function(result) {
asyncOp2(function(result1) {
...
//phew! got my result
});
});
});
});

Async Flow Control
●
Callback hell can be avoided by controlling the
program flow
●
Async.JS is an excellent library to control the
callback flow
●
Promises Pattern can be very useful with Async
Operations

Tips & Tricks
●
use + to convert expressions to a number
○
+new Date() gives Timestamp
●
use !! to convert any expression to a boolean
●
Append array to another array
○
a = [1,2,3]; b= [4,5,6]
○
Array.prototype.push.apply(a,b)

Exercises
●
Add a loop() method to the Prototype of Array
●
Implement basic Inheritance with an example of
Employee
●
print numbers 1..5, such that every number is
printed after 500ms

Object Oriented Javascript

More Related Content

What's hot

Viewers also liked

Similar to Object Oriented Javascript

More from NexThoughts Technologies

Recently uploaded

Object Oriented Javascript