Object Oriented Programming In JavaScript

Object Oriented
JavaScript
29 September 2015
Prepare & Presented By Gandhi V

1
AT A GLANCE
JavaScript
OOPs
OOPs in JavaScript
Datatypes
Error Handling In JavaScript
Improve Performance in JS
Q&A
Thank You

JavaScript
 JavaScript is a high level, dynamic, untyped, and interpreted programming
language. It has been standardized in the ECMAScript language specification
(European Computer Manufacturers Association).
 JavaScript was designed by Brendan Eich.
 Speed. Being client-side, JavaScript is very fast because any code functions can be
run immediately instead of having to contact the server and wait for an answer.
 JavaScript is very easy to implement. All you need to do is put your code in the
HTML document and tell the browser that it is JavaScript.
 JavaScript works on web users’ computers — even when they are offline!
 JavaScript allows you to create highly responsive interfaces that improve the user
experience and provide dynamic functionality, without having to wait for the server
to react and show another page.

JavaScript
 JavaScript can load content into the document if and when the user needs it,
without reloading the entire page — this is commonly referred to as Ajax.
 While in the past it was a common argument that JavaScript was a basic language
and was very 'slap dash' with no real foundation; this is no longer the case,
especially with the introduction of high scale web applications and 'adaptations'
such as JSON (JavaScript Object Notation).
 List of JavaScript libraries. Ex. Dojo Toolkit, jQuery, midori, MooTools, Prototype
JavaScript Framework, YUI Library
 Security Issues – Open to client.
 JavaScript rendering varies – Compatibility issue.

JavaScript
Programming languages used in most popular websites*
Websites
Popularity (Unique
Visitors)
Front-end
(Client Side)
Back-end (Server Side) Database
Google.com 1,100,000,000JavaScript C, C++, Go,Java, Python BigTable, MariaDB
YouTube.com 1,000,000,000JavaScript C/C++, Python, Java,Go MySQL, BigTable, MariaDB
Facebook.com
900,000,000 JavaScript Hack, PHP, C++, Java, Python,Erlang, D,Xhp MySQL, HBaseCassandra
Yahoo 750,000,000 JavaScript JavaScript, PHP MySQL, PostgreSQL
Amazon.com 500,000,000 JavaScript Java, C++, Perl Oracle Database
Wikipedia.org 475,000,000 JavaScript PHP , Hack MySQL, MariaDB
Twitter.com 290,000,000 JavaScript C++, Java, Scala, Ruby on Rails MySQL
Bing 285,000,000 JavaScript ASP.NET Microsoft SQL Server
eBay.com 285,000,000 JavaScript Java,JavaScript Oracle Database
MSN.com 280,000,000 JavaScript ASP.NET Microsoft SQL Server
Microsoft 270,000,000
Linkedin.com 260,000,000JavaScript Java, JavaScript, Scala Voldemort
Pinterest 250,000,000 JavaScript Django(a Python framework) MySQL, Redis
Ask.com 245,000,000
Wordpress.com 240,000,000 JavaScript PHP MySQL

OOPs
 Object Oriented programming is a programming style that is associated with the
concept of OBJECTS, having data fields and related member functions.
 Concepts of OOPs.
1. Objects
2. Classes
3. Data Abstraction
4. Encapsulation
5. Inheritance
6. Polymorphism
7. Dynamic Binding
 Improved software-development productivity.
 Improved software maintainability.
 Faster development & Lower cost of development.
 Object Oriented programs require a lot of work to create.

OOPs in JavaScript
 JavaScript supports Object Oriented Programming but not in the same way as other
OOP languages(C++, php, Java, etc.) do.
 The main difference between JavaScript and the other languages is that, there are
no Classes in JavaScript whereas Classes are very important for creating objects.
 However there are ways through which we can simulate the Class concept in
JavaScript.
 Another important difference is Data Hiding. There is no access specifier like
(public, private and protected) in JavaScript but we can simulate the concept using
variable scope in functions.

OOPs in JavaScript
Object
Any real time entity is considered as an Object. Every Object will have some properties
and functions.
More ways to create objects in JavaScript like:
1)Creating Object through literal
var obj={};
2)Creating with Object.create
var obj= Object.create(null);
3)Creating using new keyword
function Person(){}
var obj=new Person();

OOPs in JavaScript
Class
There are no classes in JavaScript as it is Prototype based language. But we can simulate
the class concept using JavaScript functions.
function Person(){
//Properties
this.name=“Forzia";
this.startYear=“2015";
//functions
this.CompInfo=function(){
return this.name +" Says Hi";
}
}
//Creating person instance
var p=new Person();
alert(p.CompInfo());

OOPs in JavaScript
Constructor
Actually Constructor is a concept that comes under Classes. Constructor is used to
assign values to the properties of the Class while creating object using new operator.
function Person(name,age){
//Assigning values through constructor
this.name=name;
this.age=age;
//functions
this.sayHi=function(){
return this.name +" Says Hi";
}
}
//Creating person instance
var p=new Person("aravind",23);
alert(p.sayHi());
//Creating Second person instance
var p=new Person("jon",23);
alert(p.sayHi());

OOPs in JavaScript
Inheritance (Work around)
Inheritance is a process of getting the properties and function of one class to other
class.
For example let’s consider "Student" Class, here the Student also has the properties of
name and age which has been used in Person class.
So it's much better to acquiring the properties of the Person instead of re-creating the
properties.
Now let’s see how we can do the inheritance concept in JavaScript.
var Person = function (){
this.sayHi=function(){
return " Says Hi"; }
}
//1)Prototype based Inheritance
Student.prototype= new Person();
//2)Inhertance throught Object.create
Student.prototype=Object.create(Person);
var stobj=new Student();
alert(stobj.sayHi());
We can do inheritance in above two ways.

OOPs in JavaScript
Abstraction
Abstraction means hiding the inner implementation details and showing only outer
details. To understand Abstraction we need to understand Abstract and Interface
concepts from Java. But we don't have any direct Abstract or Interface in JS.
Ex. In JQuery we will use
$("#ele")
to select select an element with id ele on a web page. Actually this code calls negative
JavaScript code
document.getElementById("ele");
But we don't need to know that we can happy use the $("#ele") without knowing the
inner details of the implementation.

OOPs in JavaScript
Polymorphism
The word Polymorphism in OOPs means having more than one form.
function Person(age,weight){
this.age = age;
this.weight = weight;
}
Person.prototype.getInfo = function(){
return "I am " + this.age + " years old " +
"and weighs " + this.weight +" kilo.";
};
function Employee(age,weight,salary){
this.age = age;
this.weight = weight;
this.salary = salary;
}
Employee.prototype = new Person();
Employee.prototype.getInfo = function(){
return "I am " + this.age + " years old " +
"and weighs " + this.weight +" kilo " +
"and earns " + this.salary + " dollar.";
};
var person = new Person(50,90);
var employee = new Employee(43,80,50000);
console.log(person.getInfo());
console.log(employee.getInfo());

Data Types In JavaScript
Data Types
• JavaScript variables can hold many data types: numbers, strings, arrays, objects and
more:
var length = 16; // Number
var lastName = "Johnson"; // String
var cars = ["Saab", "Volvo", "BMW"]; // Array
var x = {firstName:"John", lastName:"Doe"}; // Object
• In JavaScript, a variable without a value, has the value undefined. The typeof is also
undefined.
• JavaScript arrays are written with square brackets.
Array items are separated by commas. Ex. var cars = ["Saab", "Volvo", "BMW"];
• JavaScript objects are written with curly braces.
Object properties are written as name:value pairs, separated by commas.
Ex: var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

Error Handling In JavaScript
JavaScript try and catch
The try statement allows you to define a block of code to be tested for errors while it is
being executed.
The catch statement allows you to define a block of code to be executed, if an error
occurs in the try block.
Example:
<script>
try {
var aa=name.reaplace(‘m’,’s’);
}
catch(err) {
alert(err.message);
}
</script>

Improve Performance in JavaScript
1.Reduce Activity in Loops
Bad:
for (i = 0; i < arr.length; i++) {}
Better:
l = arr.length;
for (i = 0; i < l; i++) {}
2.Reduce DOM Access
Accessing the HTML DOM is very slow, compared to other JavaScript statements.
If you expect to access a DOM element several times, access it once, and use it as a local variable:
obj = document.getElementById("demo");
obj.innerHTML = "Hello";
3.Reduce DOM Size
Keep the number of elements in the HTML DOM small.
This will always improve page loading, and speed up rendering (page display), especially on smaller
devices.
Every attempt to search the DOM (like getElementsByTagName) will benefit from a smaller DOM.

Improve Performance in JavaScript
4. Avoid Unnecessary Variables
Don't create new variables if you don't plan to save values.
Often you can replace code like this:
var fullName = firstName + " " + lastName;
document.getElementById("demo").innerHTML = fullName;
With this:
document.getElementById("demo").innerHTML = firstName + " " + lastName
5.Delay JavaScript Loading
Putting your scripts at the bottom of the page body, lets the browser load the page first.
While a script is downloading, the browser will not start any other downloads. In addition all
parsing and rendering activity might be blocked.
An alternative is to use defer="true" in the script tag.
The defer attribute specifies that the script should be executed after the page has finished parsing,
but it only works for external scripts.
6.Avoid Using with
Avoid using the with keyword. It has a negative effect on speed. It also clutters up JavaScript scopes.
The with keyword is not allowed in strict mode.

Object Oriented Programming In JavaScript

More Related Content

What's hot (20)

Similar to Object Oriented Programming In JavaScript (20)

Recently uploaded (20)

Object Oriented Programming In JavaScript