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

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (20)

Semelhante a Object Oriented Javascript

Semelhante a Object Oriented Javascript (20)

Mais de NexThoughts Technologies

Mais de NexThoughts Technologies (20)

Último

Último (20)

Object Oriented Javascript